<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>react</title>
</head>
<body>
  <script src="../js/react.js"></script>
  <script src="../js/react-dom.js"></script>
  <script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
<div id="test"></div><div id="test2"></div>
  <script type='text/babel'>
  // var Div = React.createClass({
  //   render: function() {
  //   var text = 'qq'
  //     return (
  //          <h2>{text}</h2>
  //     )
  //   }
  // })
  //
  // ReactDOM.render(
  //   <Div />, document.getElementById('test')
  // );
//   var MyInput = React.createClass({
// 	handleIpt: function(event) {
//     event.preventDefault();
//   	var texts = this.refs.helloTo.value;
//   	alert(texts);
//   },
// 	render: function() {
//   		return (<input type='text' defaultValue='123' ref='helloTo' onClick={this.handleIpt} />);
//   }
// })
// ReactDOM.render(
//   < MyInput />,
//   document.getElementById('test')
// );

var MyForm = React.createClass({
    getInitialState: function() {
        return {helloTo: "I m will hu"};
    },
    handleChange: function(event) {
        this.setState({
            helloTo: event.target.value.toUpperCase()
        });
    },
    submitHandler: function(event) {
        event.preventDefault();
        alert(this.state.helloTo);
    },
    render: function() {
        return (
            <form onSubmit={this.submitHandler}>
                <input type="text" value={this.state.helloTo} onChange={this.handleChange} />
                <br />
                <button type="submit">提交</button>
            </form>
        );
    }
});

// ReactDOM.render(
//   < MyForm />,
//   document.getElementById('test')
// );

var MyForm2 = React.createClass({
    getInitialState: function() {
        return {
            options: ['B']
        }
    },
    handleChange: function(event) {
        var checked = [];
        var sel = event.target;
        for (var i=0; i<sel.length; i++) {
            var option = sel.options[i];
            if (option.selected) {
                checked.push(option.value)
            }
            console.log(checked)
        }
        this.setState({
            options: checked
        });

    },
    submitHandler: function(event) {
        event.preventDefault();
        alert(this.state.options);
    },
    render: function() {
        return (
            <form onSubmit={this.submitHandler}>
                <select multiple="true" value={this.state.options} onChange={this.handleChange} >
                    <option value="A">A opt</option>
                    <option value="B">B opt</option>
                    <option value="C">C opt</option>
                </select>
                <button type="submit">提交</button>
            </form>
        );
    }
});
// ReactDOM.render(
//   < MyForm2 />,
//   document.getElementById('test2')
// );

var MyForm3 = React.createClass({
    getInitialState: function() {
        return {
            checked: true
        }
    },
    handleChange: function(event) {
        this.setState({
            checked: event.target.checked
        })
    },
    submitHandler: function() {
        event.preventDefault();
        alert(this.state.checked);
    },
    render: function() {
        return (
            <form onSubmit={this.submitHandler}>
                <input type="checkbox" value="A" checked={this.state.checked} onChange={this.handleChange} />
                <button type="submit">提交</button>
            </form>
        );
    }
});

ReactDOM.render(
  < MyForm3 />,
  document.getElementById('test2')
);

</script>
</body>
</html>
